<%@page import="java.util.*"%>
<%@page import="java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%
    String path = request.getContextPath(); 
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+path+ "/"; 

%>
<!DOCTYPE HTML>  
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>编辑课程</title>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="bootstrap-table/dist/bootstrap-table.css">
    <link rel="stylesheet" type="text/css" href="css/xcConfirm.css" />
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
	<link rel="stylesheet" href="bootstrap-fileinput-master/css/fileinput.min.css">
	<link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/x-admin.css">
    
    <style type="text/css">
        #panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
        .td1{
			float:left;
			width:50px;
			display: block; 
			valign:middle;
		}
		.td2{
			float:left;
			width:200px;
			display: block; 
			valign:middle;
		}
		.td3{
			float:left;
			width:660px;
			display: block; 
			valign:middle;
		}
    </style>
</head>
<body>
	<div class="x-body">
            <div   class="form-horizontal" role="form">

			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">课程主图:</label>
			    <div class="col-sm-3">
			    	<input id="upload"  type="file" name="file" multiple class="file-loading">
					<input id="cover" name="cover" type="hidden" value="${result.G_COURSE_IMG }">
					<input id="oneSortName" name="oneSortName" type="hidden" value="${result.oneSortName}">
					<input id="G_ID" name="G_ID" type="hidden" value="${result.G_ID}">
			    </div>
			  </div>
			  
			  
			   <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">一级分类:</label>
			    <div class="col-sm-3">
			      <select id="one_stair_id" class="form-control">
              	  </select>
			    </div>
			  </div>
			  
			   <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">二级分类:</label>
			    <div class="col-sm-3">
			      <select id="two_stair_id" class="form-control">
			      	<option selected="selected" value="${result.two_stair_id}">${result.twoSortName}</option>
              	  </select>
			    </div>
			  </div>
			  
			   <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">三级分类:</label>
			    <div class="col-sm-3">
			      <select id="G_COUSER_SORT_ID" class="form-control">
			      	<option selected="selected" value="${result.G_COUSER_SORT_ID}">${result.threeSortName}</option>
              	  </select>
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">课程名称:</label>
			    <div class="col-sm-3">
			      <input type="text" class="form-control" id="G_COURSE_NAME" name="G_COURSE_NAME" value="${result.G_COURSE_NAME}" placeholder="请输入课程名称"/>
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">课程等级:</label>
			    <div class="col-sm-3">
			    	<select id="G_COURSE_DIFFICUITY" class="form-control">
             			<option value="4" <c:if test="${result.G_COURSE_DIFFICUITY == 4}">selected="selected"</c:if>>基础</option>
             			<option value="1" <c:if test="${result.G_COURSE_DIFFICUITY == 1}">selected="selected"</c:if>>初级</option>
             			<option value="2" <c:if test="${result.G_COURSE_DIFFICUITY == 2}">selected="selected"</c:if>>中级</option>
             			<option value="3" <c:if test="${result.G_COURSE_DIFFICUITY == 3}">selected="selected"</c:if>>高级</option>
              	   </select>
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">学习人数:</label>
			     <div class="col-sm-3">
                      <input class="form-control" placeholder="请输入正整数"  value="${result.G_LEAM_NUM}"  id="G_LEAM_NUM">
                    </div>
			  </div>
			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">折扣:</label>
			     <div class="col-sm-3">
			     		<c:if test="${result.G_DISCOUNT == 0}">
                     	 <input class="form-control" placeholder="没有折扣请输入0，50%请输入50" value="0" id="G_DISCOUNT">
			    		</c:if>
			     		<c:if test="${result.G_DISCOUNT > 0}">
                     	 <input class="form-control" placeholder="没有折扣请输入0，50%请输入50"  value="${result.G_DISCOUNT}" id="G_DISCOUNT">
			    		</c:if>
                    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">是否为代理:</label>
			     <div class="col-sm-3">
			     		<select id="is_agency" class="form-control">
		             		<option value="1" <c:if test="${result.is_agency == 1}">selected="selected"</c:if>>是</option>
		             		<option value="2" <c:if test="${result.is_agency == 2}">selected="selected"</c:if>>否</option>
		              	</select>
                    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">课程介绍:</label>
			     <div class="col-sm-3">
                      <input class="form-control" placeholder="请输入课程介绍" value="${result.G_COURSE_AIMS}" id="G_COURSE_AIMS">
                    </div>
			  </div>
			  
			   <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">课程简介:</label>
			    <div class="col-sm-3">
						<script type="text/plain" id="myEditor" class="form-control" style="width:100%;height:240px;">${result.G_COUESR_CONTENT}</script>
					</div>
			  </div>
			  
			  <div class="form-group" id="addInput">
			  <div>
			  	<label for="firstname" class="col-sm-2 control-label">添加视频:</label>
			    <div class="col-sm-3">
			    	<input style="width:500px; display: inline-block;" type="text" onchange="assignTask(this)" class="form-control awesompleted" id="awesomplete" placeholder="请输入视频名称" list="mylist"/>  
					<datalist id="mylist">  
					</datalist>  
			         <b style="cursor:pointer;" onclick="addInput()"> +</b>
			    </div>
			  </div>
			    
			  </div>
			  
			  
     	<div class="form-group" style="padding-left: 30%">
        
        <button type="submit"   onclick="save()"  class="btn btn-info" >保存</button>
        <button type="reset"    onclick="cancel()"  class="btn btn-info" >取消 </button>
   
     </div>
          </div>
	</div>
        <script src="lib/layui/layui.js" charset="utf-8"></script>
        <script src="js/x-layui.js" charset="utf-8"></script>
        <!-- 加载需要的js -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="js/jquery-bootstrap-pagination.js"></script>
		<script src="js/qunit-1.11.0.js"></script>
		<script src="js/bootstrap-datetimepicker.js"></script>
		<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
	    <script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
	    <script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
		<script src="bootstrap-fileinput-master/js/locales/zh.js"></script>
		
		<script type="text/javascript" src="umeditor/third-party/template.min.js"></script>
    	<script type="text/javascript" charset="utf-8" src="umeditor/umeditor.config.js"></script>
    	<script type="text/javascript" charset="utf-8" src="umeditor/umeditor.min.js"></script>
    	<script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>
        <script>
        $(function(){
       		var oneSortName = $("input[name=oneSortName]").val();
        	$.ajax({
    	        type: "get",
    	        url: "courseInfo/selectCourseOneStair?sid=0",
    	        dataType:"json",
    	        success: function(data){    
    	      	  if(data.code==200){	           	              
    	      		var htm='';
    	     		for (var i = 0; i < data.data.length; i++) {
    	   				var bean = data.data;
    	   				if(oneSortName == bean[i].G_NAME){
	    	   				htm +='<option selected="selected" value="'+bean[i].G_ID+'">'+bean[i].G_NAME+'</option>';
    	   				}else{
	    	   				htm +='<option value="'+bean[i].G_ID+'">'+bean[i].G_NAME+'</option>';
    	   				}
    				}
    	     		$("#one_stair_id").html(htm);
    	   	 	  }
    	        }
    	    });
       		
       		$("#one_stair_id").change(function(){
       			var value = $("#one_stair_id").val();
       			if(value == null || value == ""){
       				return;
       			}
       			$.ajax({
	    	        type: "get",
	    	        url: "courseInfo/selectCourseOneStair?sid=" + value,
	    	        dataType:"json",
	    	        success: function(data){    
	    	      	  if(data.code==200){	           	              
	    	      		var htm='';
	    	      		 htm +='<option value="">请选择分类</option>';
	    	     		for (var i = 0; i < data.data.length; i++) {
	    	   				var bean = data.data;
	    	   				htm +='<option value="'+bean[i].G_ID+'">'+bean[i].G_NAME+'</option>';
	    				}
	    	     		$("#two_stair_id").html(htm);
	    	   	 	  }
	    	        }
	    	    });
       		})
       		
       		$("#two_stair_id").change(function(){
       			var value = $("#two_stair_id").val();
       			if(value == null || value == ""){
       				return;
       			}
       			$.ajax({
	    	        type: "get",
	    	        url: "courseInfo/selectCourseOneStair?sid=" + value,
	    	        dataType:"json",
	    	        success: function(data){    
	    	      	  if(data.code==200){	           	              
	    	      		var htm='';
	    	      		 htm +='<option value="">请选择分类</option>';
	    	     		for (var i = 0; i < data.data.length; i++) {
	    	   				var bean = data.data;
	    	   				htm +='<option value="'+bean[i].G_ID+'">'+bean[i].G_NAME+'</option>';
	    				}
	    	     		$("#G_COUSER_SORT_ID").html(htm);
	    	   	 	  }
	    	        }
	    	    });
       		})
   	   });
        
            layui.use(['form','layer','upload'], function(){
                $ = layui.jquery;
              var form = layui.form()
              ,layer = layui.layer;
              });
            
          //时间插件
    		$('.form_date').datetimepicker({
    	        language:  'zh-CN',
    	        weekStart: 1,
    	        todayBtn:  1,
    			autoclose: 1,
    			todayHighlight: 1,
    			startView: 2,
    			minView: 2,
    			forceParse: 0
    	    });
            $("#upload").fileinput({
    		    uploadUrl: "upload/photoImg",
    		    uploadAsync: true,
    		    maxFileCount: 1,
    		    initialPreview: [ 
			    	'<img src="${result.G_COURSE_IMG}"  id="img"  class="file-preview-image"  width="256px" height="160px" />',
			    	],
//    		    overwriteInitial: ture,
//    			    initialPreview: [ "http://lorempixel.com/800/460/people/1"],
//    			    initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
//    			    initialPreviewFileType: 'image', // image is the default and can be overridden in config below
//    			    initialPreviewConfig: [
//    			       {caption: "People-1.jpg", size: 576237, width: "120px", url: "/site/file-delete", key: 1},
//    			    ],
//    			    uploadExtraData: {
//    			        img_key: "1000",
//    			        img_keywords: "happy, places",
//    			    }
    		}).on('fileuploaded', function(event, data, previewId, index) {
    		    var form = data.form, files = data.files, extra = data.extra,
    	        response = data.response, reader = data.reader;
    			if(response.data != null && response.data != ""){
    		    	$("#cover").val(response.data);			
    			}else{
    				alert("图片服务器异常，请重新上传！");
    			}
    		});
            
            function deleteRow(e)
            {
             e=e||event;
             var btn=e.srcElement||e.target;
             btn.parentNode.parentNode.parentNode.removeChild(btn.parentNode.parentNode);
            }
            
            function divClick(){    
    		    
      	       var show="";    
      	       var apm = document.getElementsByName("hasGroup");    
      	       for(var i=0;i<apm.length;i++){    
      	       if(apm[i].checked)    
      	        show = apm[i].value;    
      	       }    
      	         
      	       switch (show){    
      	           case '0':    
      	               document.getElementById("com").style.display="none";    
      	               break;    
      	           default:    
      	               document.getElementById("com").style.display="block";    
      	               break;                                                       
      	       }    
      	}

            var _id= 0;
        	function addInput(){
        		_id++;
        		$('#addInput').append(
        				'<div>'+
        			  	'<label for="firstname" class="col-sm-2 control-label">添加视频:</label>'+
        			    '<div class="col-sm-3">'+
        			   	 '<input style="width:500px; display: inline-block;" type="text" onchange="assignTask(this)" class="form-control awesompleted" id="awesomplete" placeholder="请输入视频名称" list="mylist"/>'+  
        					'<datalist id="mylist">'+  
        					'</datalist>'+  
        			         '<b style="cursor:pointer;" onclick="addInput()"> +</b>' +
        			    '</div>'+
        			  '</div>'
        		);
        	};
        	
        	function assignTask(a){           
                $("#mylist").empty(); //清空    
                /* var G_IS_FEE = $("#G_IS_FEE").val();
      			 var G_COURSE_INTEGEAL = $("#G_COURSE_INTEGEAL").val();
      			 if(G_IS_FEE == 0 || G_COURSE_INTEGEAL == 0){
      				alert("请先选择课程是否收费以及是否积分购买!");
      			 } */
                var videoName = $(a).val();
               /*  if(videoName == null || videoName == ""){
               	 alert("视频名称不能为空！");
               	 return;
                } */
                $.ajax({  
                    url:"courseInfo/selectVideoList?videoName=" + videoName,    
                    type:"get",    
                    success:function(data){  
                        var modelList = data.data;    
                        if(modelList!=null && modelList.length != 0){  
                            for(var i=0; i<modelList.length; i++){    
                                    var option="<option>"+modelList[i].G_LESSON_NAME+"</option>";    
                                    $("#mylist").append(option);
                            } 
                        }    
               	 }    
                }); 
      		} 
            
            function save(){
	           	var allawesompleted = $('.awesompleted');
	           	var awesompletedTpl = '';
	           	allawesompleted.each(function(inx,data){
           			awesompletedTpl += $(data).val() + ',';
           		})
           		awesompletedTpl = awesompletedTpl.substr(0, awesompletedTpl.length - 1); 
	           	
	           	var ary = awesompletedTpl.split(",")
	           	var nary=ary.sort();
	           	for(var i=0;i<ary.length;i++){
		           	if (nary[i]==nary[i+1]){
		           		alert("视频名称不能重复");
		           		return;
		           	}
	           	}
	           	
	           	var one_stair_id = $("#one_stair_id").val();
	           	if(one_stair_id == null||one_stair_id == "") {
	   		   		layer.msg('请选择一级分类!',{icon:2,time:2000});
	   				return ;
	   		   	}
	           	var two_stair_id = $("#two_stair_id").val();
	           	if(two_stair_id == null||two_stair_id == "") {
	   		   		layer.msg('请选择二级分类!',{icon:2,time:2000});
	   				return ;
	   		   	}
	           	var G_COUSER_SORT_ID = $("#G_COUSER_SORT_ID").val();
	           	if(G_COUSER_SORT_ID == null||G_COUSER_SORT_ID == "") {
	   		   		layer.msg('请选择三级分类!',{icon:2,time:2000});
	   				return ;
	   		   	}
            	
   		   	 var G_COURSE_IMG =	$("#cover").val();
   		   	 if(G_COURSE_IMG == null||G_COURSE_IMG == "") {
   		   		layer.msg('图片不能为空!',{icon:2,time:2000});
   				  return ;
   		   	 }
   		 	
   			 var G_COURSE_NAME = $("#G_COURSE_NAME").val();
   			 if(G_COURSE_NAME == null||G_COURSE_NAME == "") {
   				layer.msg('课程名称不能为空!',{icon:2,time:2000});
 				  return ;
   		   	 }
   			 
   			 var G_COURSE_DIFFICUITY = $("#G_COURSE_DIFFICUITY").val();
   			 if(G_COURSE_DIFFICUITY == 0) {
   				layer.msg('请选择课程难度!',{icon:2,time:2000});
 				  return ;
   		   	 }
   			 
   			 var is_agency = $("#is_agency").val();
   			 if(is_agency == 0) {
   				layer.msg('请选择是否为代理!',{icon:2,time:2000});
 				  return ;
   		   	 }
   			 
   			 /* var G_IS_FEE = $("#G_IS_FEE").val();
   			 if(G_IS_FEE == 0) {
   				layer.msg('请选择是否收费!',{icon:2,time:2000});
 				  return ;
   		   	 } */
   			 
   			/*  var G_COURSE_INTEGEAL = $("#G_COURSE_INTEGEAL").val();
   			 if(G_COURSE_INTEGEAL == 0) {
   				layer.msg('请选择是否积分购买!',{icon:2,time:2000});
 				  return ;
   		   	 } */
   			 
   			 var G_LEAM_NUM = $("#G_LEAM_NUM").val();
   			 if(G_LEAM_NUM == null || G_LEAM_NUM == "") {
   				layer.msg('请输入学习人数!',{icon:2,time:2000});
 				  return ;
   		   	 }
   			 
   			 var G_DISCOUNT = $("#G_DISCOUNT").val();
   			 if(G_DISCOUNT == null || G_DISCOUNT == "") {
   				layer.msg('请输入折扣!',{icon:2,time:2000});
 				  return ;
   		   	 }
   			 
   			 var G_COURSE_AIMS = $("#G_COURSE_AIMS").val();
   			 if(G_COURSE_AIMS == null || G_COURSE_AIMS == "") {
   				layer.msg('请输入课程介绍!',{icon:2,time:2000});
 				  return ;
   		   	 }
   			 
   			var um = UM.getEditor('myEditor');
			var G_COUESR_CONTENT = um.getContent();
			if(G_COUESR_CONTENT == null||G_COUESR_CONTENT == "") {
   				layer.msg('课程简介不能为空!',{icon:2,time:2000});
				  return ;
   		   	 }
   			 
   	         $.ajax({
   	             type: "post",
   	             url: "courseInfo/updateCourse",
   	             data: {
   	            	G_ID:$("input[name=G_ID]").val(),
   	            	is_agency:is_agency,
   	            	one_stair_id:one_stair_id,
   	            	two_stair_id:two_stair_id,
   	            	G_COUSER_SORT_ID:G_COUSER_SORT_ID,
   	            	G_COURSE_IMG:G_COURSE_IMG,
   	            	G_COURSE_NAME:G_COURSE_NAME,
   	            	G_COURSE_DIFFICUITY:G_COURSE_DIFFICUITY,
   	            	G_LEAM_NUM:G_LEAM_NUM,
   	            	G_DISCOUNT:G_DISCOUNT,
   	            	G_COURSE_AIMS:G_COURSE_AIMS,
   	            	G_COUESR_CONTENT:G_COUESR_CONTENT,
   	            	awesompletedTpl:awesompletedTpl,
   	             },
   	             dataType:"json",
   	             success: function(data){    
   	            	if(data.code==200){
   	    	           	layer.alert("编辑成功", {icon: 6},function () {
   	    	           	location.reload();
   	    	           		//parent.location.reload();
   	 	                    // 获得frame索引
   	 	                    //var index = parent.layer.getFrameIndex(window.name);
   	 	                    //关闭当前frame
   	 	                    //parent.layer.close(index);
   	 	                    //parent.location.reload();
   	 	                 	//window.location.replace("jsp/courseInfoManager/courseInfoList.jsp")
   	 	                });    
   	 	       		}else if(data.code == 300){
   	 	    	      	var txt = data.msg;
   	 	      	    	 layer.alert(txt); 
   	 	      	    }
   	             }
   	         });  
   	         
   			}
            
   	   
   	   function cancel(){
   		   	
   		// 获得frame索引
           var index = parent.layer.getFrameIndex(window.name);
           //关闭当前frame
           parent.layer.close(index);
   	         
   			}
   	   
   	function changePhone() {
		var country = $("#type").find("option:selected").val();
		if(country == null) {
			var htm='';
  		    htm +='<option value=" ">请选择</option>';
			return $("#country").html(htm);
		}
		
		 $.ajax({
            type: "get",
            url: "common/studyCountryList",
            dataType:"json",
            data:{type:country},
            success: function(data){    
           	
          	  if(data.code==200){	           	              
          		var htm='';
          		    htm +='<option value=" ">请选择</option>';
         		for (var i = 0; i < data.data.length; i++) {
	   				var bean = data.data;
	   				htm +='<option value="'+bean[i].id+'" code="'+bean[i].name+'">'+bean[i].name+'</option>';
  				}
         		$("#country").html(htm);
       	 	  }
     	      
            }
        });  
	}
   	   
   	layui.use(['laydate','element','laypage','layer'], function(){
        $ = layui.jquery;//jquery
      laydate = layui.laydate;//日期插件
      lement = layui.element();//面包导航
      laypage = layui.laypage;//分页
      layer = layui.layer;//弹出层

      //以上模块根据需要引入
      var start = {
        min: '2000-01-01 00:00:00'
        ,max: '2099-06-16 23:59:59'
        ,istoday: false
        ,choose: function(datas){
          end.min = datas; //开始日选好后，重置结束日的最小日期
          end.start = datas //将结束日的初始值设定为开始日
        }
      };
      
      var end = {
        min: '2000-01-01 00:00:00'
        ,max: '2099-06-16 23:59:59'
        ,istoday: false
        ,choose: function(datas){
          start.max = datas; //结束日选好后，重置开始日的最大日期
        }
      };
      
      var end1 = {
    	        min: '2000-01-01 00:00:00'
    	        ,max: '2099-06-16 23:59:59'
    	        ,istoday: false
    	        ,choose: function(datas){
    	          start.max = datas; //结束日选好后，重置开始日的最大日期
    	        }
    	      };
      
      document.getElementById('LAY_demorange_s').onclick = function(){
        start.elem = this;
        laydate(start);
      }
      
    });
   	
        </script>
        <script type="text/javascript">
    	//实例化编辑器
    	var um = UM.getEditor('myEditor');
    	//失去焦点
    	um.addListener('blur',function(){
    	//判断是否有内容
        if(UM.getEditor('myEditor').hasContents()){
        	$("#infomationContent").val(UM.getEditor('myEditor').getContent());
        }
   	 	});
    	//获得焦点
    	um.addListener('focus',function(){
        
    	});
     	//营销管理
     	
	</script>
</body>
</html>